<template>
	<view class="wrap">
		<view class="logo">
		</view>
		<view class="inner">
			<u-avatar mode="square" size="160" src="#" />
			<view class="username">{{vuex_user.username}}</view>
			<view class="info">
				<view>用户名</view>
				<view>{{vuex_user.realName}}</view>
			</view>
		</view>
		<view class="logout">
			<u-button type="primary" plain shape="circle" :custom-style="{'width':'254px','height':'44px'}"
				@click="logout">退出登录
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			logout() {
				this.$u.vuex('vuex_user', {})
				uni.redirectTo({
					url: '/pages/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			background: url(../../static/login_bg.png);
			background-size: cover;
			width: 100%;
			height: 310upx;
		}

		.inner {
			margin-top: -110upx;
			padding-top: 60upx;
			width: 686upx;
			height: 500upx;
			background-color: #fff;
			box-shadow: 0 4upx 20upx 0 rgba(57, 128, 233, 0.16);
			border-radius: 20upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.username {
				font-size: 36upx;
				font-weight: bold;
				color: #333;
			}

			.info {
				width: 100%;
				height: 102upx;
				background: #F5F9FE;
				border-radius: 0 0 20upx 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				font-weight: 400;
				color: #333;
				padding: 0 28upx;
			}
		}

		.logout {
			margin-top: 150upx;
		}
	}
</style>
